/**
 * 品牌列表
 */
import React, {Component} from 'react';
import {View, StyleSheet, Text, ListView, Image, TouchableOpacity, Platform} from  'react-native';
let dimension = require('Dimensions');
let {width, height} = dimension.get('window');
let cols = 5;
let cellW = width/5;//Platform.OS == 'ios' ? 70 : 65;
let cellH = 70;
let vMargin = (width - cols * cellW) / (cols + 1);
export default class TopListView extends Component {
    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
        this.state = {
            dataSource: ds.cloneWithRows(this.props.dataArr)
        };
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                contentContainerStyle={styles.contentViewStyle}
                scrollEnabled={false}
                style={styles.listViewStyle}
            >

            </ListView>
        )
    }

    renderRow(rowData) {
        return (
            <TouchableOpacity onPress={()=>{alert("sa")}}>
                <View style={styles.cellStyle}>
                    <Image source={rowData.image} style={{width:52,height:52,resizeMode:'contain'}}/>
                    <Text style={styles.titleStyle}>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}
TopListView.propTypes = {
    dataArr: React.PropTypes.array,
};
TopListView.defaultProps = {
    dataArr: []
};
const styles = StyleSheet.create({
    contentViewStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width
    },
    cellStyle: {
        width: cellW,
        height: cellH,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10,
        marginLeft: vMargin
    },
    titleStyle: {
        fontSize: Platform.OS == 'ios' ? 14 : 12,
        color: 'gray'
    }
});
